作业<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
    <style>
        
        *{
                padding: 0px;
                margin: 0px;
                list-style: none;
                text-decoration: none;
            }
            body{
                background: #f5f5f5;
            }
            .a1-1{
                width: 100%;
                height: 66px;
            }
            .a1{
                width: 100%;
                height: 66px;
                position: fixed;
                background: #fff;
                left: 0px;
                top: 0px;
                border-bottom: 1px solid #e5e5e5;
                
            }
            .logo {
	            margin: 16px 25px 16px 12px;
	            float: left;
            }
            
            
            .a2{
                margin: 14px 30px 0 0;
                
            }
            .a2 a{
               
                margin: 0 0 0 12px;
                float: left;
                text-decoration: none;
            }
            .a2-1{
                height: 36px;
                line-height: 36px;
                width: 36px;
                border-radius: 100%;
                display: block;
                text-align: center;
                background: yellow;
                font-size: 20px;
                color:black
            }
            .a2-2{
                float: right;
            }
           
            .a2-2 img{
                float: left;
                margin: 6px 10px;
                width: 27px;
                height: 27px;
            }
            .a2-2 a {
                text-decoration: none;
                float: right;
                margin: 6px 25px;
                border-radius: 5px;
                color: white;
                padding: 2px 2px 2px 2px;
                display: block;
                background-color: red;
                border: 1px solid red;
            }
            .a3{
                width: 1440px;
                height: 610px;
                margin: 10px auto;
            }

            .a3-1{
                float: left;
                width: 1082px;
                height: 610px;
                margin-right: 10px;
            }


           .a3-1 p{
                left: 0px;
                bottom: 0px;
                height: 30px;
                left: 16px;
                width: 332px;
                line-height: 30px;
                color: white;
                background: red;
                position: relative;
                top: -50px;
            }
            .a3-1 img{
                width: 1082px;
                height: 610px;
                border-radius: 10px;
            }

            .a4{
                float: right;
                width: 347px;
                height: 610px;
                
            }


            .a4 ul{
                float: rgiht;
                width: 347px;
                height: 610px;
            }
            .a4 li{
                width: 347px;
                height: 195px;
                margin-bottom: 10px;
            }

            .a4 img{
                width: 347px;
                height: 195px;
                border-radius: 10px;
            }
            .a4 p{
                position: relative;
                top: -29px;
                left: 19px;
                color: white;
            }
            .a5{
                width: 1440px;
                height: 40px;
                margin: 20px auto;
            }

  
            .a5 li{
                display: inline;
                margin-right: 15px;
                border-radius: 8px;
               
            }

            .a5 a{
                
                width: 126px;
                height: 31px;
                text-decoration: none;
                font-size: 14px;
                line-height: 31px;
                /* margin: 10px 90px 10px 10px; */
                
            }
            .a5 select{
                background: #f5f5f5;
               
            }

            .a6{
                
                width: 1440px;
                height: 1050px;
                margin: 10px auto;
            }
            .a6 ul{
                width: 1440px;
                height: 1000px;
            }
            .a6 li{
                float: left;
                height: 330px;
                width: 344px;
                margin-left: 15px;
                margin-bottom: 10px;
            }
            

            .a7{
                height: 330px;
                width: 344px;
                background: #fff;
                border-radius: 8px;
            }
            .look{
                position: relative;
                top: 4px;
            }
            .zan{
                position: relative;
                right: 286px;
                top: -303px;
               
                height: 36px;
                line-height: 36px;
                width: 36px;
                border-radius: 100%;
                display: block;
                text-align: center;
                background: #FF0000;
                font-size: 20px;
                color: #fff;
            }
            
            .a7-1{
                height: 232px;
                width: 344px;
                border-radius: 8px 8px 0px 0px;
            }
            .max-box-a{
                color: #333;
                font-size: 14px;
            }
            .date{
                float: left;
                display:block;
                margin-top: 25px;
                font-size: 12px;
                color: #ccc;
                margin-left: 10px;
            }
            .views{
                float: right;
                display:block;
                margin-top: 25px;
                font-size: 12px;
                color: #ccc;
                margin-right: 10px;
                
            }
            
            .footer-father{
                width: 100%;
                height: 33px;
            }

            .footer{
                position: fixed;
                bottom: 0;
                z-index: 9;
                background: #272B33;
                height: 33px;
                line-height: 33px;
                width: 100%;
            }

            .copyright {
                float: right;
                color: #999;
                margin: 0 20px 0 0;
                font-size: 13px;
            }

            .load{
                margin: 10px auto;
                text-align: center;
                height: 25px;
                width: 1440px;
              
            }

    </style>
</head>
<body>
    <div class="a1-1">
        <div class="a1">
           
         
            <div class="a2">
                <a class="a2-1" href="">赞</a>
                <a class="a2-1" href="">萌</a>
                <a class="a2-1" href="">哈</a>
                <a class="a2-1" href="">艹</a>
                <a class="a2-1" href="">买</a> 
            </div>
            <div class="a2-2">
                <img src="./images/i00.png" alt="">
                <a class="login_button" id="show_login" href="#">登录</a>
            </div>
        </div>
    </div> 
    <div class="a3">
        <div class="a3-1">
                <img src="./images/s003.jpg" alt="">
                <p>苹果又双叒叕搞事情？这次还有点意思</p>
           
        </div>
        <div class="a4">
            <ul>
                <li>
                    <img src="./images/s02.jpg" alt="">
                    <p>免费可商用素材库，设计师快来</p>
                </li>
                <li>
                    <img src="./images/s03.jpg" alt="">
                    <p>华为发布全屋智能，让房子越住越增值？</p>
                </li>
                <li>
                    <img src="./images/s04.jpg" alt="">
                    <p>是什么原因，让教科书里的小人丑得如此猖狂？</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="a5">
        <ul>
            <li style=" border: 1px solid red; padding: 10px 90px 10px 10px;">
                <a style="color: red;" href="">最新</a>
             </li>
            <li>
                 <select style="padding: 12px 10px;border-radius: 8px; line-height: 31px;">
                     <option value="volvo">排行榜</option>
                     <option value="saab">24小时排行榜</option>
                     <option value="opel">本周排行榜</option>
                     <option value="audi">本月排行榜</option>
               </select>
            </li>
            <li style=" border: 1px solid #999; padding: 10px 90px 10px 10px;">
             <a href="">碰碰运气</a>
            </li>
        </ul>
    </div>
    <div class="a6">
        <ul>
            <li>
                <div class="a7">
                   
                    <img class="a7-1" src="./images/i01.jpg" alt="">
                    <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">冒烟了？麦当劳冒烟了？</a></p>
                    
                    <span class="date"> 49分钟前  </span>
                    <span class="views">
                       <img class="look" src="./images/hot.png" alt="">  <b>0 </b>   <b class="zan">赞</b>
                    </span>
                    <span class="views">
                        <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                    </span>
                   
                </div>
                
            </li>

            <li>
                <div class="maxbox">
                    <img class="maxbox-img" src="./images/i02.jpg" alt="">
                    <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">这辆车堪比别墅，竟连地下室都有！</a></p>
                    
                    <span class="date"> 49分钟前  </span>
                    <span class="views">
                       <img class="look" src="./images/hot.png" alt="">  <b>0 </b> <b class="zan">赞</b>
                    </span>
                    <span class="views">
                        <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                    </span>
                   
                </div>
                
            </li>

            <li>
                <div class="maxbox">
                    <img class="maxbox-img" src="./images/i03.jpg" alt="">
                    <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">灵感|“用细节颠覆传统”</a></p>
                    <span class="date"> 49分钟前  </span>
                    <span class="views">
                       <img class="look" src="./images/hot.png" alt="">  <b>0 </b>
                    </span>
                    <span class="views">
                        <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                    </span>
                   
                </div>
                
            </li>

            <li>
                <div class="maxbox">
                    <img class="maxbox-img" src="./images/i04.jpg" alt="">
                    <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">幽默是创意的催化剂</a></p>
                    <span class="date"> 49分钟前  </span>
                    <span class="views">
                       <img class="look" src="./images/hot.png" alt="">  <b>0 </b>
                    </span>
                    <span class="views">
                        <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                    </span>
                   
                </div>
                
            </li>

            <li>
                <div class="maxbox">
                    <img class="maxbox-img" src="./images/i05.jpg" alt="">
                    <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">DC发布新英雄“猴王子”形象设计，网友：烦死了！</a></p>
                    <span class="date"> 49分钟前  </span>
                    <span class="views">
                       <img class="look" src="./images/hot.png" alt="">  <b>0 </b>
                    </span>
                    <span class="views">
                        <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                    </span>
                   
                </div>
                
            </li>

            <li>
                <div class="maxbox">
                    <img class="maxbox-img" src="./images/i06.png" alt="">
                    <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">全是违和感！这些合成伤脑筋！</a></p>
                    <span class="date"> 49分钟前  </span>
                    <span class="views">
                       <img class="look" src="./images/hot.png" alt="">  <b>0 </b>
                    </span>
                    <span class="views">
                        <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                    </span>
                   
                </div>
                
            </li>

            <li>
                <div class="maxbox">
                    <img class="maxbox-img" src="./images/i07.jpg" alt="">
                    <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">华为发布全屋智能，让房子越住越增值？</a></p>
                    <span class="date"> 49分钟前  </span>
                    <span class="views">
                       <img class="look" src="./images/hot.png" alt="">  <b>0 </b>
                    </span>
                    <span class="views">
                        <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                    </span>
                   
                </div>
                
            </li>

            <li>
                <div class="maxbox">
                    <img class="maxbox-img" src="./images/i07.png" alt="">
                    <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">曾经紧追苹果的LG，怎么就不行了？</a></p>
                    <span class="date"> 49分钟前  </span>
                    <span class="views">
                       <img class="look" src="./images/hot.png" alt="">  <b>0 </b>
                    </span>
                    <span class="views">
                        <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                    </span>
                   
                </div>
                
            </li>

            <li>
                <div class="maxbox">
                    <img class="maxbox-img" src="./images/i08.jpg" alt="">
                    <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">比疫苗标语更魔性的，是疫苗段子</a></p>
                    <span class="date"> 49分钟前  </span>
                    <span class="views">
                       <img class="look" src="./images/hot.png" alt="">  <b>0 </b>
                    </span>
                    <span class="views">
                        <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                    </span>
                   
                </div>
                
            </li>

            <li>
                <div class="maxbox">
                    <img class="maxbox-img" src="./images/i09.jpg" alt="">
                    <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">是什么原因，让教科书里的小人丑得如此猖狂？</a></p>
                    <span class="date"> 49分钟前  </span>
                    <span class="views">
                       <img class="look" src="./images/hot.png" alt="">  <b>0 </b>
                    </span>
                    <span class="views">
                        <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                    </span>
                   
                </div>
                
            </li>

            <li>
                <div class="maxbox">
                    <img class="maxbox-img" src="./images/i10.jpg" alt="">
                    <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">沃尔沃设计辆车，简直就是个花园！</a></p>
                    <span class="date"> 49分钟前  </span>
                    <span class="views">
                       <img class="look" src="./images/hot.png" alt="">  <b>0 </b>
                    </span>
                    <span class="views">
                        <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                    </span>
                   
                </div>
                
            </li>

       


            <li>
                <div class="maxbox">
                    <img class="maxbox-img" src="./images/i11.jpg" alt="">
                    <p style="margin-left: 10px; margin-top: 16px;"><a class="max-box-a" href="">这辆车堪比别墅，竟连地下室都有！</a></p>
                    <span class="date"> 49分钟前  </span>
                    <span class="views">
                       <img class="look" src="./images/hot.png" alt="">  <b>0 </b>
                    </span>
                    <span class="views">
                        <img class="look" src="./images/look.png" alt=""> <b>17 </b>
                    </span>
                   
                </div>
                
            </li>



        </ul>
   </div>
   <div class="load">太快了吧，慢慢来</div>
   <div class="footer-father">
    <div class="footer">
        <span class="copyright">© 2012-2021 设计癖 |  京ICP备15049021号  |   
        <a class="color: #999;">京公网安备 11010202007701号</a>
        </span>
    </div>
</div>
</body>
</html>